<template>
  <div class="van-page-search-form">
    <div
      v-for="(form, index) in searchFormList"
      :key="index + 'searchFormList'"
    >
      <el-form ref="searchForm" :model="form" size="small">
        <el-row :gutter="15" class="flex" style="flex-wrap: wrap">
          <el-col :xs="6" :sm="6" :md="6" :lg="6">
            <el-form-item prop="columnName">
              <el-select
                v-model="form.columnName"
                placeholder="请选择属性名称"
                style="width: 100%"
                @change="(val) => __handleChange(val, index)"
              >
                <el-option
                  v-for="(option, idx) in searchOptions"
                  :key="idx + 'attributeId'"
                  :label="option.propName"
                  :value="option.columnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2">
            <el-form-item prop="operation">
              <el-select
                v-model="form.operation"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(option, idx) in computeOptions"
                  :key="idx + 'operation'"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template>
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <el-form-item prop="content">
                <!-- 输入框 -->
                <el-input
                  v-if="form.dataType === 'Input' || !form.dataType"
                  v-model="form.content"
                  placeholder="请输入"
                  clearable
                />
                <!-- 下拉选择 / 多选 / 单选 -->
                <el-select
                  v-if="form.dataType === 'Select'"
                  v-model="form.content"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(option, index) in form.options"
                    :key="index"
                    :label="option.label"
                    :value="option.value"
                  >
                  </el-option>
                </el-select>
                <!-- 日期选择器 -->
                <el-date-picker
                  v-if="form.dataType === 'Date'"
                  v-model="form.content"
                  type="date"
                  style="width: 100%"
                  value-format="timestamp"
                  placeholder="请选择日期"
                  clearable
                />
                <!-- 日期时间选择器 -->
                <el-date-picker
                  v-if="form.dataType === 'Datetime'"
                  v-model="form.content"
                  type="datetime"
                  style="width: 100%"
                  value-format="timestamp   "
                  placeholder="请选择日期时间"
                  clearable
                />
                <!-- 月日选择器 -->
                <el-date-picker
                  v-if="form.dataType === 'Month'"
                  v-model="form.content"
                  type="month"
                  style="width: 100%"
                  value-format="timestamp"
                  placeholder="请选择月"
                  clearable
                />
                <!-- 数字查询 -->
                <el-input-number
                  v-if="form.dataType === 'Number'"
                  v-model="form.content"
                  placeholder="请输入"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </template>
          <el-col :xs="2" :sm="2" :md="2" :lg="2">
            <el-form-item prop="relationExpression">
              <el-select
                v-model="form.relationExpression"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(option, idx) in relationOptions"
                  :key="idx + 'relationExpression'"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6">
            <el-form-item class="tl">
              <el-button
                v-if="index === searchFormList.length - 1"
                type="primary"
                size="mini"
                :icon="CirclePlus"
                @click="__handleAdd()"
                >新增
              </el-button>
              <el-button
                v-if="searchFormList.length > 1"
                type="danger"
                size="mini"
                :icon="Delete"
                @click="__handleRemove(index)"
                >删除
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRef, onBeforeMount } from "vue";
import { getQueryData } from "@/api/url";
import { post } from "@/api/http";
export default defineComponent({
  name: "SearchGroup",
  props: {
    queryCode: {
      type: String,
      default: "userist",
    },
  },
  emits: ["searchForm"],
  setup(props, { emit }) {
    const searchFormList = reactive({
      arr: [] as any,
    });
    const searchOptions = reactive({
      arr: [],
    });
    const computeOptions = reactive([
      {
        label: "等于",
        value: "=",
      },
      {
        label: "小于",
        value: "<",
      },
      {
        label: "大于",
        value: ">",
      },
      {
        label: "大于等于",
        value: ">=",
      },
      {
        label: "小于等于",
        value: "<=",
      },
      {
        label: "不包含",
        value: "not like",
      },
      {
        label: "包含",
        value: "like",
      },
    ]);
    const relationOptions = reactive([
      {
        label: "或者",
        value: "or",
      },
      {
        label: "并且",
        value: "and",
      },
    ]);
    const searchAttributes = reactive([
      "columnName",
      "operation",
      "content",
      "relationExpression",
    ]); // 需要提交的属性
    const queryCode = toRef(props, "queryCode");
    function getQuery() {
      post({
        url: getQueryData,
        data: { code: queryCode.value },
      })
        .then((res: any) => {
          // const { resultList } = res;
          const resultList = res.data;
          searchOptions.arr = resultList;
          console.log(searchOptions.arr, 1212);
          if (searchOptions.arr.length) {
            searchOptions.arr.forEach(
              (item: { dataType: string; options: any; content: string }) => {
                if (item.dataType === "Select") {
                  item.options = JSON.parse(item.content);
                }
              }
            );
          }
        })
        .catch(console.log);
    }
    function search() {
      const paramsList = [] as any;
      searchFormList.arr.forEach((searchForm: { [x: string]: any }) => {
        const params = {} as any;
        searchAttributes.forEach((item) => {
          if (
            searchForm[item] !== undefined &&
            searchForm[item] !== "" &&
            searchForm[item]
          ) {
            params[item] = searchForm[item];
          }
        });
        const boolArr = [];
        // eslint-disable-next-line guard-for-in
        for (const key in params) {
          let bool = false;
          if (params[key]) {
            bool = true;
          } else {
            bool = false;
          }
          boolArr.push(bool);
        }

        if (boolArr.length === Object.keys(searchAttributes).length) {
          paramsList.push(params);
        }
      });
      if (paramsList.length > 0) {
        emit("searchForm", paramsList);
      }
    }
    function reset() {
      searchFormList.arr = [];
      handleAdd();
      emit("searchForm", null);
    }
    function handleChange(val: any, index: string | number) {
      const currentItem: any[] = searchOptions.arr.filter(
        (item: any) => item.columnName === val
      );
      searchFormList.arr[index]["dataType"] =
        currentItem[0]?.dataType || "Input";
      searchFormList.arr[index]["operation"] = "=";
      searchFormList.arr[index]["relationExpression"] = "and";
      searchFormList.arr[index]["content"] = "";
      searchFormList.arr[index]["options"] = currentItem[0]?.options;
    }
    function handleAdd() {
      searchFormList.arr.push({
        columnName: "",
        operation: "=",
        relationExpression: "and",
        dataType: "Input",
        content: "",
      });
    }
    function handleRemove(index: any) {
      searchFormList.arr.splice(index, 1);
    }
    onBeforeMount(() => {
      getQuery();
      if (searchFormList.arr.length === 0) {
        handleAdd();
      }
    });
    return {
      searchFormList,
      searchOptions,
      computeOptions,
      relationOptions,
      searchAttributes,
      getQuery,
      search,
      reset,
      handleChange,
      handleAdd,
      handleRemove,
    };
  },
});
</script>
